<template>
  <div class="reg">
    <!-- <van-nav-bar
      title="用户注册"
      left-arrow
      @click-left="goBack"
    />-->
    <nav-bar :title="'用户注册'"></nav-bar>
    <div class="reg-box">
      <van-form @submit="onSubmit" label-align="left">
        <van-field
          readonly
          clickable
          name="form.userType"
          :value="form.userType"
          label="会员类型"
          placeholder="点击选择会员类型"
          :rules="[{ required: true, message: '会员类型不能为空' }]"
          @click="showEdu = true"
        />
        <van-popup v-model="showEdu" position="bottom">
          <van-picker
            show-toolbar
            :columns="eduColumns"
            @confirm="confirmEdu"
            @cancel="showEdu = false"
          />
        </van-popup>
        <van-field
          v-model="form.companyName"
          name="form.companyName"
          label="公司名称"
          placeholder="请输入公司名称，自由职业者请添无"
          :rules="[{ required: true, message: '公司名称不能为空' }]"
        />
        <van-field
          v-model="form.userName"
          name="form.userName"
          label="姓名"
          placeholder="请输入您的名字"
          :rules="[{ required: true, message: '姓名不能为空' }]"
        />
        <van-field
          v-model="form.email"
          name="form.email"
          label="邮箱"
          placeholder="请输入您的邮箱"
          :rules="[{ required: true, message: '邮箱不能为空' }]"
        />
        <van-field
          v-model="form.position"
          name="form.position"
          label="职务"
          placeholder="请输入您的职务"
          :rules="[{ required: true, message: '职务不能为空' }]"
        />
        <van-field
          v-model="form.userPassword"
          name="form.userPassword"
          label="密码"
          placeholder="请输入您的密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <van-field
          v-model="form.confirmUserPassword"
          name="form.confirmUserPassword"
          label="密码"
          placeholder="请再次输入您的密码"
          :rules="[{ required: true, message: '确认密码不能为空' }]"
        />
        <van-field
          v-model="form.phone"
          name="form.phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field name="form.code" v-model="form.code" label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <span
              size="small"
              type="primary"
              v-show="showCodeButton"
              class="get-captcha"
              @click="getCode()"
            >发送验证码</span>
            <span v-show="!showCodeButton" class="get-captcha">发送中{{time}}</span>
          </template>
        </van-field>
        <!-- <div class="input-box">
          <input type="text" v-model="form.code" placeholder="请输入您的验证码" />
          <span v-show="showCodeButton" class="get-captcha" @click="getCode()">获取验证码</span>
          <span v-show="!showCodeButton" class="get-captcha">发送中{{time}}</span>
        </div>-->
        <div style="margin: 16px;">
          <van-button
            color="#0050A5"
            class="reg-box-btn"
            round
            block
            type="info"
            native-type="submit"
          >注 册</van-button>
        </div>
      </van-form>
      <!-- <ValidationObserver ref="observer">
        <div class="reg-box-content">
          <van-radio-group v-model="form.userType" direction="horizontal">
            <van-radio name="0">企业账号</van-radio>
            <van-radio name="1">个人账号</van-radio>
          </van-radio-group>
          <div class="reg-box-content-company">
            <validation-provider rules="required" name="company" v-slot="{errors}">
              <input type="text" v-model="form.companyName" placeholder="请输入公司名称，自由职业者请添无" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-username">
            <validation-provider rules="required" name="username" v-slot="{errors}">
              <input type="text" v-model="form.userName" placeholder="请输入您的名字" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-email">
            <validation-provider rules="required|email" name="email" v-slot="{errors}">
              <input type="text" v-model="form.email" placeholder="请输入您的邮箱" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-work">
            <validation-provider rules="required" name="work" v-slot="{errors}">
              <input type="text" v-model="form.position" placeholder="请输入您的职务" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-password">
            <validation-provider rules="required|min:6" name="password" v-slot="{errors}">
              <input type="password" v-model="form.userPassword" placeholder="请输入您的密码" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-password">
            <validation-provider
              rules="required|confirmed:password"
              name="rePassword"
              v-slot="{errors}"
            >
              <input type="password" v-model="form.confirmUserPassword" placeholder="请确认您的密码" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <div class="reg-box-content-phone">
            <validation-provider rules="required|phone" name="phone" v-slot="{errors}">
              <input type="text" v-model="form.phone" placeholder="请输入您的手机号" />
              <span class="error">{{errors[0]}}</span>
            </validation-provider>
          </div>
          <validation-provider rules="required|length:6|integer" name="captcha" v-slot="{errors}">
            <div class="reg-box-content-captcha">
              <div class="input-box">
                <input type="text" v-model="form.code" placeholder="请输入您的验证码" />
                <span v-show="showCodeButton" class="get-captcha" @click="getCode()">获取验证码</span>
                <span v-show="!showCodeButton" class="get-captcha">发送中{{time}}</span>
              </div>
              <span class="error">{{errors[0]}}</span>
            </div>
          </validation-provider>
        </div>
      </ValidationObserver>-->
    </div>
    <!-- <div class="reg-box-btn" @click="onSubmit()">注册</div> -->
  </div>
</template>

<script>
// import { ValidationProvider } from 'vee-validate'
// import { ValidationObserver } from 'vee-validate'
import navBar from '@/components/NavBar'
export default {
  name: 'Reg',
  components: {
    // ValidationProvider,
    // ValidationObserver,
    navBar,
  },
  data() {
    return {
      showCodeButton: true,
      form: {},
      time: 60,
      showEdu: false,
      eduColumns: ['个人会员', '企业会员'],
    }
  },
  methods: {
    confirmEdu(val) {
      console.log(val)
      this.form.userType = val
      this.showEdu = false
    },
    goBack() {
      this.$router.back()
    },
    onSubmit() {
      // if (!this.consent) {
      //   this.$toast.error("请同意注册协议!");
      //   return false;
      // }

      // this.$refs.observer.validate().then((valid) => {
      // if (true === valid) {
      if (!this.form.userType) {
        this.$toast.fail('请选择账号类型')
        return false
      }
      this.form.userType = this.form.userType == '企业会员' ? 0 : 1
      this.$request({
        url: '/oauth/register',
        data: this.form,
        method: 'post',
      }).then((rsp) => {
        console.log(rsp)
        if (rsp.code === 200) {
          this.$toast.success('注册成功!')
          this.$store.dispatch('setUserInfo', rsp.data)
          this.$router.push({ path: '/' })
        } else {
          this.$toast.fail(rsp.content)
        }
      })
      // }
      // })
    },
    getCode() {
      if (!this.form.phone) {
        this.$toast.fail('请填写手机号!')
        return false
      }
      this.form.timestamp = new Date().getTime()
      this.$request({
        url: '/code/shortMessage',
        data: { phoneNumber: this.form.phone, timestamp: this.form.timestamp },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.showCodeButton = false
          this.countdown()
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    countdown() {
      if (!this.showCodeButton) {
        if (this.time > 0) {
          setTimeout(() => {
            this.time--
            this.countdown()
          }, 1000)
        } else {
          this.showCodeButton = true
          this.time = 60
        }
      }
    },
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';
.reg-box {
  .van-cell {
    flex-direction: column;
  }
  .van-cell--clickable {
    flex-direction: inherit;
  }
}
.reg {
  &-box {
    width: px2rem(634);
    font-size: px2rem(24);
    .error {
      display: block;
      padding-left: px2rem(70);
      padding-top: px2rem(10);
    }
    &-content {
      width: 100%;
      margin: 0 auto;

      input {
        box-sizing: border-box;
        width: px2rem(634);
        @include colCenter(px2rem(57));
        border: 1px solid #bfbfbf;
        padding-left: px2rem(80);
      }

      & > div {
        margin-bottom: px2rem(25);
        height: px2rem(80);
      }

      &-company {
        input {
          background: url('../assets/img/user/company.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }
      }

      &-username {
        input {
          background: url('../assets/img/user/name.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }
      }

      &-email {
        input {
          background: url('../assets/img/user/email.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }
      }

      &-work {
        input {
          background: url('../assets/img/user/work.png') px2rem(18) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }
      }

      &-phone {
        input {
          background: url('../assets/img/user/phone.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(30) px2rem(35);
        }
      }

      &-password {
        input {
          background: url('../assets/img/user/password.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }
      }

      &-captcha {
        margin-bottom: px2rem(50);
        & > .input-box {
          position: relative;
        }
        input {
          background: url('../assets/img/user/code.png') px2rem(20) center
            no-repeat;
          background-size: px2rem(35) px2rem(35);
        }

        .get-captcha {
          position: absolute;
          right: px2rem(20);
          bottom: px2rem(15);
          color: $mainColor;
          border-left: px2rem(1) solid $mainColor;
          z-index: 99;
          height: px2rem(25);
          padding-left: px2rem(10);
        }
      }
    }

    &-btn {
      width: px2rem(634);
      margin: 0 auto;
      background: rgba(0, 80, 165, 1);
      @include lineCenter(px2rem(80));
      color: #ffffff;
      font-size: px2rem(34);
      font-weight: 500;
    }
  }
}
</style>
